<template>
  <div>
    <van-button
      class="follow-btn"
      round
      size="small"
      @click="followFn"
      v-if="isFollowed"
      :loading="following"
      >已关注</van-button
    >
    <van-button
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      :loading="following"
      v-else
      @click="followFn"
      >关注</van-button
    >
  </div>
</template>

<script>
import { followGoApi, followOutApi } from "@/api/article";
export default {
  props: {
    autId: {
      type: [Number, String],
    },
    isFollowed: Boolean,
    //v-modle 接收值
    // value: Boolean,
  },
  methods: {
    async followFn() {
      //点击关注 或者未关注 开启 loading 加载状态
      this.following = true;
      //判断当前是关注还是未关注
      //如果未关注 走关注 接口 如果关注了 走未关注接口
      try {
        if (this.is_followed) {
          //取消关注接口

          await followOutApi(this.autId);
          //   //修改视图的状态
          //   this.articleContent.is_followed = false;
        } else {
          //关注接口

          await followGoApi(this.autId);
          //   //修改视图的状态
          //   this.articleContent.is_followed = true;
        }
        //修改视图的状态
        // this.$emit("isFollowFn", !this.value);
        this.$emit("isFollowFn", !this.isFollowed);
        // this.articleContent.is_followed = !this.articleContent.is_followed;
        //接口请求结束以后 关闭loading加载

        this.following = false;
      } catch (error) {
        console.log(error);
      }
    },
  },
  data() {
    return {
      loadingShow: false,
      articleContent: {}, //存储文章数据
      statusShow: false,
      following: false, //按钮是否开启loading加载
    };
  },
  //通过model 进行重命名
  model: {
    prop: "isFollowed", //父向子传递的值
    event: "isFollowFn", //子组件触发的事件
  },
};
</script>

<style></style>
